<template>
    <div id="qrCode" class="qrCode" >
        <div class="mark"></div>
        <div class="qr-main">
            <i class="close fa fa-times" @click="close"></i>
            <div class="qr-title">
                分销助手注册二维码
            </div>
            <div id="all-qrcode">
                <div class="qr-dept" id="qr-dept">{{orgName}}<span v-if="storeName">&nbsp;- &nbsp;{{storeName}}</span><span v-if="groupName">&nbsp;-&nbsp;{{groupName}}</span></div>
                <canvas id="canvas"></canvas>
            </div>
            <img id="qrcodeImg"  width="100%" />
            <!--<canvas id="tagCanvas"></canvas>-->
            <div class="qr-info">
                <div>长按保存到本地</div>
            </div>
            <div class="space"></div>
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcode'
    import Html2canvas from 'html2canvas'
    export default{
        props: ['qrcode'],
        data(){
            return {
                codes:'',
                orgName:'',
                storeName:'',
                groupName:'',
                imgUrl:'',
                isShot:true
            }
        },
        components: {
            QRCode,
            Html2canvas
        },

        methods: {
            useqrcode(){
                var _self = this;
                _self.changeImg('qrcode');
                console.log(this.qrcode);
                _self.isShot = true;
                this.orgName = this.qrcode.orgName;
                this.storeName = this.qrcode.storeName;
                this.groupName = this.qrcode.groupName;
                let text = '';
                let urlsParams = 'qudaowangRegister'
                if(this.orgName){
                    text +=  this.orgName;
                    urlsParams += '|' + this.qrcode.orgId;
                }
                if(this.storeName){
                    text += '&nbsp;-'+ this.storeName;
                    urlsParams += '|' + this.qrcode.storeId;
                }
                if(this.groupName){
                    text += '&nbsp;-'+ this.groupName;
                    urlsParams += '|'+ this.qrcode.groupId
                }
                var canvas = document.getElementById('canvas')
                let url = window.location.origin
                let urls = url.split(".");
                if(urls[1] != '0'){
                    urls[1] = 'agencych';
                    url = urls.join(".")
                    url += '/vendor-h5/'+window.location.search;
                    url += '#/register';
                    url +='/'+ urlsParams;
                }else{
                    url += '/register/'+urlsParams;
                }
                console.log(url);
                document.getElementById("qr-dept").innerHTML = text;
                QRCode.toCanvas(canvas, url, function (error) {
                    if (error) console.error(error)
                    setTimeout(()=>{
                        _self.toImg(_self);
                    },500);
                })


            },
            close(){
                var code = document.getElementById("qrCode");
                code.style.display = 'none';
                this.isShot = true;
                this.changeImg('qrcode');
            },
            toImg(){
                var _self = this;
                var allQrcode = document.getElementById("all-qrcode");
                console.log(allQrcode);
                var tagCanvas = document.getElementById('tagCanvas')
                Html2canvas(allQrcode).then(canvas => {
                    console.log(canvas);
                    var url = canvas.toDataURL();//图片地址
                    // _self.imgUrl = url;
                    // _self.isShot =false;
                    let qrcodeImg = document.getElementById("qrcodeImg");
                    qrcodeImg.src = url;
                   _self.changeImg('img');
                });
            },
            changeImg(type){
                console.log(1)
                let qrcodeImg = document.getElementById("qrcodeImg");
                let qrcode = document.getElementById("all-qrcode")
                if(type == 'img'){
                    console.log(2)
                    qrcodeImg.style.display = 'block';
                    qrcode.style.display = 'none';
                }else{
                    console.log(3)
                    qrcode.style.display = 'block';
                    qrcodeImg.style.display = 'none';
                }
            }
        },
        mounted(){
            this.changeImg('qrcode');
            // this.useqrcode();
        }
    }
</script>



<style scoped>
    .qrCode{position: fixed;width: 100%;height: 100%;left: 0;top:0;outline: 0;z-index:1500;display: none;}
    .mark{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: #000; transition: opacity .15s linear;opacity: .5;z-index: 1010}
    .qr-main{margin:150px auto;text-align: center;z-index:1040;position: relative;width: 350px;background: #fff;}
    .qr-dept{color:#ff6c00}
    .qr-info{margin:20px 0;}
    .close{position: absolute;right: 5px;top:5px;font-size: 20px}
    .qr-title{margin: 0 0 30px 0;   height: 35px;line-height: 35px;font-size: 16px;}
    .space{height:20px;}
</style>